Purpose: To learn about the landmark points returned by the face mesh model and how to pick specific points like the eyes, nose and mouth out of them.

Exercise (1)

---

• Use ml5.js to identify and track facial landmarks in real time.
• Click here to download the base code for this exercise

Exercise (2)

---

• Plot and label the landmark points on the face to highlight specific groups such as the eyes, nose, lips and jawline.

Solutions

---

• Link to view the solution for Exercise 1
• Link to download the solution code for Exercise 1
• Link to view the solution for Exercise 2
• Link to download the solution code for Exercise 2

1. Check that the webcam works before the class. ml5.js loads the model over the internet, so the internet connection needs to be working.
2. Start from the base code linked in Exercise 1 rather than typing the webcam and model setup again.
3. Draw out that the array index numbering is fixed. The same index is always the tip of the nose, on every face and in every frame, which is why a program can rely on it.
4. The points come back as an array, so drawing all of them is one loop. Highlighting a group such as the eyes means picking out particular numbers from that array.
5. Have the students watch the printed coordinates while they move their head. Seeing the numbers change is what connects the picture on the screen to the data behind it.
6. Points to Ponder:
   • Try wearing glasses, keep a hand over part of your face, or sit in a dark corner. Does the detection of face still work? Where does it start to go wrong, and what does that tell you about how it works?
   • A program that can follow your facial features this closely could read a lot from a face. What could that be used for in real life?